<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片裁剪</title>
    <link rel="stylesheet" href="../pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs9">
        <div style="height:325px;background-color: rgb(247, 247, 247);">
            <img id="sourceImage" src="">
        </div>
    </div>
    <div class="layui-col-xs3" style="padding-left:0px;">
        <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
        </div>
    </div>
</div>

<div class="layui-row">
    <div class="layui-form-item" style="margin-bottom: 0;">
        <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" style="margin-right: 10px;" cropper-event="rotate" data-option="-5">左旋5°</button>
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" style="margin-right: 10px;" cropper-event="rotate" data-option="5">右旋5°</button>
            <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" style="margin-right: 10px;" cropper-event="reset">重置</button>
            <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" style="margin-right: 10px;">选择图片</label>
            <input class="layui-upload-file" id="uploadPicture" type="file" accept="image/*" value="选择图片">
        </div>
        <div class="layui-form-mid layui-word-aux">建议：图片的尺寸宽高比为1:1,大小在5m以内。</div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../pear/pear.js"></script>
<script>
    layui.use(['jquery','layer','cropper'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let cropper = layui.cropper;

        var options = {
            aspectRatio: 1 / 1, // 裁剪框比例
            preview: '#previewImage', // 预览div
            viewmode: 1,
            autoCropArea: 1
        };
        $("#sourceImage").cropper(options);

        window.init = function(img = '') {
            $("#sourceImage").cropper('replace', img, false);
        }

        window.save = function () {
            $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题

            let img = $("#sourceImage")
                .cropper("getCroppedCanvas", { width: 280, height: 140 })
                .toDataURL('image/jpeg'); // 转换为base64;

            // 更换cropper的图片。默认false，适应高度，不失真
            $("#sourceImage").cropper('replace', img, false);
            return img;
        }

        $(".pear-btn").on('click', function () {
            var event = $(this).attr("cropper-event");

            if (event === 'rotate') {
                var option = $(this).attr('data-option');
                $("#sourceImage").cropper('rotate', option);
            } else if (event === 'reset') {
                $("#sourceImage").cropper('reset');
            }

            $("#uploadPicture").change(function () {
                var r = new FileReader();
                var f = this.files[0];

                var uploadFileSize = f.size / 1024;
                if (uploadFileSize > 5120) {
                    parent.layer.msg("上传文件不得超过5m", { icon: 5 });
                    return false;
                }

                r.readAsDataURL(f);
                r.onload = function (e) {
                    $("#sourceImage")
                        .cropper('destroy')
                        .attr('src', this.result)
                        .cropper(options);
                };
            });
        });
    });
</script>
</body>

</html>